<template>
  <div class="wrapLimit clx main">
    <div class="updateCost">
      <div class="form-baseinfo">
        <el-row class="form-row">
          <el-form class="form-horizontal" :model="inputModel" :rules="rules">
            <el-form-item>
              <span>ERP成本中心ID</span>
              <el-input v-model="inputModel.costId" disabled />
            </el-form-item>
            <el-form-item prop="costName">
              <span>ERP成本中心名称</span>
              <div>
                <el-select v-model="inputModel.costName" filterable placeholder="请选择" @change="costChange">
                  <el-option
                    v-for="item in costType"
                    :key="item.id"
                    :label="item.costName + ' ( ' + item.costId + ' )'"
                    :value="item.costId"
                  />
                </el-select>
              </div>
            </el-form-item>
            <el-form-item>
              <span>部门ID</span>
              <el-input v-model="inputModel.orgId" disabled />
            </el-form-item>
            <el-form-item prop="orgName">
              <span>部门名称</span>
              <div>
                <el-select v-model="inputModel.orgName" filterable placeholder="请选择" @change="orgChange">
                  <el-option
                    v-for="item in orgType"
                    :key="item.id"
                    :label="item.orgName + ' ( ' + item.orgId + ' )'"
                    :value="item.orgId"
                  />
                </el-select>
              </div>
            </el-form-item>
            <el-form-item class="button-group">
              <div>
                <el-button class="item" type="primary" @click="close">关闭</el-button>
                <el-button class="item" type="primary" @click="save">保存</el-button>
              </div>
            </el-form-item>
          </el-form>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getByIdCostOrgRelation,
  getERPCostCenter,
  getOAOrg,
  insertOrupdateCostOrgRelation
} from '@/api/LaborProtection/costOrgRelation'
import { closeActiveTag } from '@/utils/lpUtils.js'

export default {
  name: 'InsertOrupdateCost',
  data() {
    return {
      id: '',
      total: 0,
      currentPage: 1,
      pageSize: 10,
      costType: [],
      orgType: [],
      inputModel: {
        costId: '',
        costName: '',
        orgId: '',
        orgName: ''
      },
      rules: {
        costName: [{ required: true, message: '请选择ERP成本中心名称', trigger: 'change' }],
        orgName: [{ required: true, message: '请选择部门名称', trigger: 'change' }]
      }
    }
  },
  mounted() {
    if (typeof this.$route.query.id !== 'undefined') {
      this.getByIdCostOrgRelation()
    }
    this.getERPCostCenter()
    this.getOAOrg()
  },
  methods: {
    getByIdCostOrgRelation() {
      this.id = this.$route.query.id
      getByIdCostOrgRelation(this.id).then((res) => {
        if (!res.error) {
          this.inputModel.costId = res.costId
          this.inputModel.costName = res.costId
          this.inputModel.orgId = res.orgId
          this.inputModel.orgName = res.orgId
        }
      })
    },
    getERPCostCenter() {
      const data = {}
      getERPCostCenter(data).then((res) => {
        this.costType = res
      })
    },
    getOAOrg() {
      const data = {}
      getOAOrg(data).then((res) => {
        this.orgType = res
      })
    },
    orgChange() {
      this.inputModel.orgId = this.inputModel.orgName
    },
    costChange() {
      this.inputModel.costId = this.inputModel.costName
    },
    close() {
      closeActiveTag(this, '/laborProtection/costOrgRelation')
    },
    save() {
      if (this.inputModel.orgId == '') {
        return this.$message.error('部门Id不能为空')
      }
      if (this.inputModel.costId == '') {
        return this.$message.error('ERP成本中心Id不能为空')
      }
      const data = {
        orgId: this.inputModel.orgId,
        costId: this.inputModel.costId
      }
      if (this.id != '') {
        data.id = this.id
      }
      insertOrupdateCostOrgRelation(data).then((res) => {
        if (!res.error) {
          this.$message.success('保存成功')
          this.close()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.updateCost {
  .form-baseinfo {
    .form-row {
      display: flex;
      flex-wrap: wrap;
    }

    .form-horizontal {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: 100%;

      .el-form-item {
        width: 30%;
        height: 100px;
        margin: 20px;
      }

      .button-group {
        position: absolute;
        bottom: -800px;
        left: 45%;
        transform: translateX(-50%);
        width: 100%;
        display: flex;
        justify-content: center;
        .item {
          width: 98px;
          height: 38px;
          margin: 0 30px;
        }
      }
    }

    ::v-deep .el-input__inner,
    ::v-deep .el-select {
      width: 450px;
    }
  }
}
</style>
